<template>
  <div class="step-box">
    <div v-if="isShowFlag === 'one'">
      <el-row :gutter="20" class="page-box">
        <el-col :span="24" style="padding: 3% 10% 20px;">
          <!--<p class="padding-line-height">尊敬的<span class="font-weight">{{customerInfo.name}}{{customerInfo.sex}}</span>您好！根据人民银行规定，我们将以录音录像方式对本次开立对公银行结算账户过程予以记录。请问您是否同意？（是）</p>-->
          <p class="padding-line-height">尊敬的<span class="font-weight">{{ customerInfo.name }}</span>先生/女士，您好！根据人民银行规定，我们将以录音录像方式对本次开立对公银行结算账户过程予以记录。请问您是否同意？（是）</p>
          <p class="padding-line-height">1.请问您是<span class="font-weight">{{ customerInfo.companyName }}</span>的法定代表人（负责人）吗？（是）</p>
          <p class="padding-line-height">2.请问你是否确定授权<span class="font-weight">{{ customerInfo.principal }}</span>，证件号码为<span class="font-weight">{{ customerInfo.idCard }}</span>，代理前往<span class="font-weight">{{ customerInfo.branchBank }}</span>办理对公开户（变更）（是）</p>
          <p class="padding-line-height">3.请问贵单位主要经营哪些业务？（<span class="font-weight">经营业务:{{ customerInfo.business }}</span>）</p>
          <p class="padding-line-height">（请根据单位性质判断是否存在可疑，参照营业执照经营范围）</p>
          <p class="padding-line-height">4.请问贵单位大约有多少名员工？</p>
          <p class="padding-line-height">5.请问贵单位实际经营地址是哪里？（需精确到门牌号）</p>
          <p class="padding-line-height">6.请问您是否自愿在本行开立<span class="font-weight">{{ customerInfo.companyName }}</span>的<span class="font-weight">{{ customerInfo.account }}</span>（一般存款账户/专用存款账户/临时存款账户）？（是）</p>
          <p class="padding-line-height">7.请问贵单位开立该账户的用途是什么？</p>
          <p class="padding-line-height">8.请确认贵单位提供的开户申请资料是否真实、有效？（是）</p>
          <p class="padding-line-height">9.请确认在相关开户申请资料上的签名是否是您本人亲笔签名？（是）</p>
          <p class="padding-line-height">10.请问您是否已详细阅读《开设单位银行结算账户涉通讯网络新型违法犯罪法律责任告知书》并知晓账户不得出租、出借、买卖以及相关惩戒措施？（是）</p>
          <p class="padding-line-height">11.自开户次日起，如6个月内未发生业务，我行将限制账户的非柜面业务功能，请知晓。</p>
        </el-col>
        <el-col :span="24" style="padding: 0 10%;">
          <el-col><h4>客户签名</h4></el-col>
          <el-col class="signNameBox mt10">
            <el-col style="width: 100%;height: 100%;" class="txt-center"><h2 v-if="customAssignFlag">客户签名区</h2><img v-if="!customAssignFlag" style="width: 100%;" :src="cusSignBase64" alt=""></el-col>
          </el-col>
        </el-col>
        <el-col class="view-bottom">
          <el-row :gutter="20">
            <el-col :span="12" class="txt-right">
              <el-button type="primary" @click="sendAssignClick"><span v-text="assignHtml" /></el-button>
            </el-col>
            <el-col :span="12" class="txt-left">
              <el-button type="primary" @click="nextStep2">确认</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'two'" class="mt5 custInfo-box">
      <el-row class="view-header">面签业务确认单</el-row>
      <el-row class="view-middle">
        <BizCertForm :option="bizCertOption" :data="bizCertData" />
      </el-row>
      <el-row class="view-bottom">
        <el-row :gutter="20">
          <el-col :span="12" class="txt-right">
            <el-button type="primary" @click="bizCertFail">拒绝</el-button>
          </el-col>
          <el-col :span="12" class="txt-left">
            <el-button type="primary" @click="bizCertSuccess">通过</el-button>
          </el-col>
        </el-row>
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'three'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src="assets/theme/img/viceoBiz/success.png" alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证成功</h2></el-row>
            <el-row class="padding-line-height txt-center">渠道编号：{{ vqid }}</el-row>
            <el-row class="padding-line-height txt-center">dockID：{{ sessionId }}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom" />
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'four'" class="mt5 custInfo-box">
      <el-row class="view-box">
        <el-row class="view-header">认证结果</el-row>
        <el-row>
          <el-row class="photo-box">
            <div class="success-photo center">
              <img src="assets/theme/img/viceoBiz/cardFail.png" alt="">
            </div>
            <el-row class="photo-title" style="margin: 10px 0px"><h2>认证失败</h2></el-row>
            <el-row class="padding-line-height txt-center">失败原因：{{ reasonDescribe }}</el-row>
          </el-row>
        </el-row>
        <el-row class="view-bottom" />
      </el-row>
    </div>
    <div v-else-if="isShowFlag === 'four'" class="mt5 custInfo-box">
      <el-row class="view-header">交易结束</el-row>
      <el-row class="">
        <el-row class="photo-box">
          <div class="exceed-photo">
            <img src="assets/theme/img/viceoBiz/ending.png" alt="">
          </div>
          <el-row class="photo-title">交易结束</el-row>
        </el-row>
      </el-row>
      <el-row class="view-bottom" />
    </div>
    <el-dialog title="凭证预览" :visible.sync="dialogVisible" top="20px" width="95%">
      <el-scrollbar style="height: 500px;">
        <img style="width: 100%" :src="bizCertUrl" alt="">
      </el-scrollbar>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="openVideoUploadFileFun">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="拒绝申请" :visible.sync="dialogFormVisibleFail" append-to-body width="70%">
      <el-row>
        <el-input
          v-model="failReason"
          type="textarea"
          :rows="4"
          placeholder="请输入拒绝原因……"
          resize="none"
        />
      </el-row>
      <div slot="footer" class="dialog-footer">
        <el-button style="margin-right: 10px;" @click="dialogFormVisibleFail = false">取 消</el-button>
        <el-button type="primary" @click="bizCertFailClick">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import $ from 'jquery'
import Axios from 'axios'
import html2canvas from 'html2canvas'
import BizCertForm from '@/views/videoBiz/phoneBank/common/bizCertForm'
import {
  uploadFile,
  submitBizCert,
  imgTransBase64,
  saveTransPipeline,
  queryVideoBizCert
} from '@/api/videoBiz/videoBiz'

export default {
  name: 'ForOpenHouseVideo',
  components: {
    BizCertForm
  },
  data() {
    return {
      isShowFlag: 'one',
      customAssignFlag: true,
      assignHtml: '签名',
      customerInfo: {},
      dialogVisible: false,
      bizCertUrl: '',
      failReason: '',
      frontName: '',
      reverseName: '',
      cusSceneName: '',
      licenseName: '',
      bizCertName: '',
      frontBase64: 'assets/theme/img/viceoBiz/frontPhoto.png',
      reverseBase64: 'assets/theme/img/viceoBiz/reversePhoto.png',
      cusSceneBase64: 'assets/theme/img/viceoBiz/perpr.png',
      cusSignBase64: '',
      bizCertData: {},
      bizCertOption: {},
      bizCertSeqNo: '',
      vqid: '',
      dialogFormVisibleFail: false,
      cardActiveFlag: false,
      sessionId: '',
      reasonDescribe: ''
    }
  },
  created() {

  },
  mounted() {
    /** ******************************** 小程序交互信令 ****************************************/
    const self = this
    self.bizCertOption = window.videoOptions.openHouseVideoOption.phoneBankOpenHouseOption
    // 工作台结束会话
    window.eventEmitter.$on('EventVideoChatDone', () => {
      Constants.ModelChat = {}
      const biztype = sessionStorage.getItem('businessType')
      if (biztype == '对公开户') {
        self.activeName = 'third'
        window.ctpMenuOption.home.redirectName = 'phoneBankForOpenHouse'
        self.resetGlobalVarible()
        self.isShowFlag = 'one'
        self.nextStep(0)
      }
    })
    // 视频进线
    window.eventEmitter.$on('EventPhoneBankOpenRing', (data) => {
      console.log(JSON.stringify(data))
      self.resetGlobalVarible()
      self.isShowFlag = 'one'
      self.nextStep(0)
      self.customerInfo = data.customerInfo
      self.sessionId = Constants.ModelChat.sid
      self.saveTransPipelineFun()
      sessionStorage.setItem('businessType', data.customerInfo.businessType)
    })
    // 收到客户签名
    window.eventEmitter.$on('EventGetBizSign', (data) => {
      // 客户签名照片
      if (data.cusSignCard) {
        imgTransBase64(data.cusSignCard).then(response => {
          self.customAssignFlag = false
          self.cusSignBase64 = response.data
          self.assignHtml = '重新签名'
        }).catch(error => {
          console.log(error)
        })
      }
    })
    // 收到面签业务申请单
    window.eventEmitter.$on('EventGetBizSignForm', (data) => {
      // 身份证正面照
      if (data.frontIDCard) {
        self.frontName = data.frontIDCard
        imgTransBase64(data.frontIDCard).then(response => {
          self.frontBase64 = response.data
          self.$set(self.bizCertData, 'frontPhoto', self.frontBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 身份证反面照
      if (data.reverseIDCard) {
        self.reverseName = data.reverseIDCard
        imgTransBase64(data.reverseIDCard).then(response => {
          self.reverseBase64 = response.data
          self.$set(self.bizCertData, 'backPhoto', self.reverseBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 客户头像
      if (data.cusSceneCard) {
        self.cusSceneName = data.cusSceneCard
        imgTransBase64(data.cusSceneCard).then(response => {
          self.cusSceneBase64 = response.data
          self.$set(self.bizCertData, 'customerPhoto', self.cusSceneBase64)
        }).catch(error => {
          console.log(error)
        })
      }
      // 渠道编号
      self.vqid = (Constants.Model.userData && Constants.Model.userData.vqid) || ''
      // 营业执照
      self.licenseName = data.bussinessLicense
      // 电子凭证信息
      self.bizCertData = {
        /** ********************************** 客户信息 *************************************/
        // 客户姓名
        'name': data.customerInfoList.name,
        // 身份证号码
        'idCard': data.customerInfoList.idCard,
        // 电话号码
        'tel': data.customerInfoList.tel,
        // 联系地址
        'address': data.customerInfoList.address,
        // 职业
        'profession': data.customerInfoList.profession,
        // 职业中类
        'professionType': data.customerInfoList.professionType,
        // 正面照
        'frontPhoto': self.frontBase64,
        // 反面照
        'backPhoto': self.reverseBase64,
        // 联网核查结果
        'internetResult': data.customerInfoList.internetResult,
        // 人像比对结果
        'onlineResult': data.customerInfoList.onlineResult,
        // 客户人像
        'customerPhoto': self.cusSceneBase64,
        /** ********************************** 企业信息 *************************************/
        // 统一社会信用代码（编码）
        'socialCode': data.cusInfoList.socialCode,
        // 企业名称
        'cusName': data.cusInfoList.cusName,
        // 类型
        'cusType': data.cusInfoList.cusType,
        // 经营场所
        'cusAddress': data.cusInfoList.cusAddress,
        // 法定代表人（经营者）名称
        'cusLegalName': data.cusInfoList.cusLegalName,
        /** ********************************** 交易信息 *************************************/
        // 业务类型：（对公开户/变更）
        'tradType': data.tradInfoList.tradType,
        // 企业名称
        'tradName': data.tradInfoList.tradName,
        // 账户种类
        'accountType': data.tradInfoList.accountType,
        // 开户机构
        'openAccount': data.tradInfoList.openAccount,
        // 被委托人证件类型
        'princCardType': data.tradInfoList.princCardType,
        // 被委托人身份证号码
        'princCardNum': data.tradInfoList.princCardNum,
        // 面签生效日期
        'effectDate1': data.tradInfoList.effectDate1,
        // 面签失效日期
        'effectDate2': data.tradInfoList.effectDate2,
        // 客户承诺
        'customerCommitment': '我自愿在本行开立/变更对公账户，并委托' + self.customerInfo.principal + '前往' + self.customerInfo.branchBank + '支行办理相关手续，确认提供的申请资料真实、有效、完整、合法、准确，并已认真阅读《开设单位银行结算账户涉通讯网络新型违法犯罪法律责任告知书》并知晓账户不得出租、出借、买卖以及相关惩戒措施。',
        // 客户签名
        'customerSignature': self.cusSignBase64,
        // 交易日期
        'transactionDate': data.tradInfoList.transactionDate,
        // 客服人员编号
        'managerNum': Constants.Agent.agentId,
        // 客服人员姓名
        'manager': Constants.Agent.agentName
      }
      // 更新客户信息交易流水
      self.updateTransPipelineFun(true, false)
    })
  },
  methods: {
    // 步骤条步进
    nextStep(index) {
      this.$emit('nextStep', index)
    },
    // 发起签名
    sendAssignClick() {
      console.log('发起签名111')
      globalUserData.sendEventResBizSign()
    },
    // 下一步
    nextStep2() {
      if (window.Settings.nextStepFlag) {
        this.customAssignFlag = false
      }
      if (this.customAssignFlag) {
        globalUiKit.notify('提示', '请先执行签名操作！', 'error')
        return
      }
      this.nextStep(1)
      this.isShowFlag = 'two'
      globalUserData.sendEventBizCertFormStep()
    },
    // 拒绝
    bizCertFail() {
      this.dialogFormVisibleFail = true
    },
    bizCertFailClick() {
      if (!this.failReason) {
        globalUiKit.notify('提示', '拒绝原因不能为空！', 'error')
        return
      }
      globalUserData.sendEventBizCertFail(this.failReason)
      this.updateTransPipelineFun(true, false)
      this.dialogFormVisibleFail = false
      this.nextStep(2)
      this.isShowFlag = 'four'
      this.failReason = ''
    },
    // 接口失败全局变量控制
    globalBizCertFail(message) {
      this.cardActiveFlag = false
      this.dialogVisible = false
      this.failReason = message
      this.nextStep(2)
      this.isShowFlag = 'four'
      globalUserData.sendEventBizCertFail(this.failReason)
      this.updateTransPipelineFun(false, true)
    },
    // 认证成功
    bizCertSuccess() {
      const self = this
      html2canvas(document.querySelector('#bizVideoHouseCertCanvas'), {
        allowTaint: false
      }).then(function(canvas) {
        console.log('biz cert canvas is: ' + canvas.toDataURL())
        self.dialogVisible = true
        self.bizCertUrl = canvas.toDataURL()
      })
    },
    // 凭证推送到影像平台
    openVideoUploadFileFun() {
      const bizCertBlob = Utils.dataURLtoBlob(this.bizCertUrl)
      const formData = new FormData()
      formData['enctype'] = 'multipart/form-data'
      formData.append('file', bizCertBlob)
      uploadFile(formData).then(response => {
        console.log('response biz cert link is: ' + response.data)
        this.bizCertName = response.data
        if (window.Settings.imgLinkUploadFlag) {
          this.faceInterviewFun()
        } else {
          this.submitBizCertFun()
        }
      }).catch(error => {
        console.log(error)
        if (window.Settings.imgLinkUploadFlag) {
          this.faceInterviewFun()
        } else {
          this.submitBizCertFun()
        }
      })
    },
    submitBizCertFun() {
      // 3 文件链接
      const params = {
        'fileInfos': [{
          'fileType': '社会信用代码证',
          'fileTypeCode': '2602001',
          'fileUrl': this.licenseName
        }, {
          'fileType': '委托人身份证正面',
          'fileTypeCode': '2602002',
          'fileUrl': this.frontName
        }, {
          'fileType': '委托人身份证反面',
          'fileTypeCode': '2602003',
          'fileUrl': this.reverseName
        }, {
          'fileType': '客户现场照',
          'fileTypeCode': '2602004',
          'fileUrl': this.cusSceneName
        }, {
          'fileType': '业务确认单',
          'fileTypeCode': '2602005',
          'fileUrl': this.bizCertName
        }],
        'filePartName': 'ZNKFDGMQP',
        'modeCode': 'ZNKFDGMQ',
        'modelName': '对公面签',
        'sessionId': Constants.ModelChat.sid
      }
      console.log('request submit biz cert data: ' + JSON.stringify(params))
      submitBizCert(params).then(response => {
        const data = response.data
        console.log('response submit biz form data: ' + JSON.stringify(data))
        this.bizCertSeqNo = data.data
        if (data.code == 200) {
          this.cardActiveFlag = true
          this.updateTransPipelineFun()
          this.faceInterviewFun()
        } else {
          if (!data.message) {
            data.message = 'submit biz form failed！'
          }
          this.reasonDescribe = '提交电子凭证失败！'
          this.globalBizCertFail(data.message)
          globalUiKit.notify('提示', '提交电子凭证失败！', 'error')
        }
      }).catch(error => {
        console.log(error)
        error = 'submit biz form failed！'
        this.reasonDescribe = '提交电子凭证失败！'
        this.globalBizCertFail(error)
        globalUiKit.notify('提示', '电子凭证接口请求失败！', 'error')
      })
    },
    // 面签接口
    faceInterviewFun() {
      const params = {
        namespace: 'PublicInfo',
        key: 'faceInterview',
        query: {
          'CstNo': '',
          'CstNm': this.bizCertData.name,
          'IdentTp': '1',
          'IdentNo': this.bizCertData.idCard,
          'CtcTel': this.bizCertData.tel,
          'AcctNo': '',
          'AgntNm': this.customerInfo.principal,
          'AgntIdentNo': this.customerInfo.idCard,
          'AgntIdentTp': '1',
          'AgntMblNo': '',
          'AgncRsn': '',
          'TkEffDt': this.bizCertData.effectDate1 ? this.bizCertData.effectDate1.replace(/-/g, '') : '',
          'InvalDt': this.bizCertData.effectDate2 ? this.bizCertData.effectDate2.replace(/-/g, '') : '',
          'Adr': this.bizCertData.address,
          'ImgTaskNo': Constants.ModelChat.sid,
          'AgncBsnNm': '01-开立账户',
          'SoclCrdtCd': this.bizCertData.socialCode,
          'EntpNm': this.bizCertData.cusName,
          'EntpTpNm': this.bizCertData.cusType,
          'CorprtnAdrAbnFlg': '',
          'DlAbnAdrFlg': '',
          'SvrLoseCrdtFlg': '',
          'AuthTlrNo': ''
        }
      }
      queryVideoBizCert(params).then(res => {
        console.log('response face inter view  data: ' + JSON.stringify(res))
        if (res.data && res.data.code == 200) {
          this.dialogVisible = false
          this.cardActiveFlag = true
          globalUserData.sendEventBizCertSuccess()
          this.updateTransPipelineFun(false, true)
          this.nextStep(2)
          this.isShowFlag = 'three'
        } else {
          if (!res.data.message) {
            res.data.message = 'face inter view form failed！'
          }
          this.reasonDescribe = '面签失败！'
          this.globalBizCertFail(res.data.message)
          globalUiKit.notify('提示', '面签失败！', 'error')
        }
      }).catch(error => {
        console.log(error)
        error = 'face inter view form failed！'
        this.reasonDescribe = '面签失败！'
        this.globalBizCertFail(error)
        globalUiKit.notify('提示', '面签接口请求失败！', 'error')
      })
    },
    // 记录交易流水
    saveTransPipelineFun: function() {
      const params = {
        'transactionNo': '',
        'transactionDate': '',
        'transactionTime': '',
        'channelType': Constants.ModelChat.chatType,
        'sessionId': Constants.ModelChat.sid,
        'cardNo': '',
        'transactionAmount': '',
        'isSatisfaction': '',
        'docidNo': Constants.ModelChat.sid,
        'businessType': '对公面签',
        'idCardType': '身份证',
        'agentNo': Constants.Agent.agentId,
        'agentName': Constants.Agent.agentName,
        'errorMsg': this.failReason,
        'filePartName': 'ZNKFDGMQP',
        'modelCode': 'ZNKFDGMQ'
      }
      console.log('request save trans pipeline data: ' + JSON.stringify(params))
      saveTransPipeline(params).then(response => {
        const data = response.data
        console.log('response save trans pipeline data: ' + JSON.stringify(data))
        if (data.code == 200) {
          console.log('记录交易流水成功')
          globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
        } else {
          console.log('记录交易流水失败')
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 更新交易流水
    updateTransPipelineFun: function(customerFlag, imgLinkUploadFlag) {
      const params = {
        'sessionId': Constants.ModelChat.sid,
        // 'transactionStatus': this.cardActiveFlag ? '成功' : '失败',
        'errorMsg': this.failReason
      }
      if (customerFlag) {
        params.accountName = this.bizCertData.name
        params.idCardNo = this.bizCertData.idCard
        params.customerName = this.bizCertData.name
        params.startDate = this.bizCertData.effectDate1
        params.endDate = this.bizCertData.effectDate2
        params.unitedSocialCreditNo = this.bizCertData.socialCode
        params.principalIdType = '身份证'
        params.principalIdNum = this.bizCertData.princCardNum
        params.principalName = this.customerInfo.principal
      }
      if (imgLinkUploadFlag) {
        params.frontImge = this.frontName
        params.backImge = this.reverseName
        params.csImge = this.cusSceneName
        params.businessImge = this.bizCertName
        params.creditNoImage = this.licenseName
        params.uploadFlag = 'img'
      }
      console.log('request update trans pipeline data: ' + JSON.stringify(params))
      saveTransPipeline(params).then(response => {
        const data = response.data
        console.log('response update trans pipeline data: ' + JSON.stringify(data))
        if (data.code == 200) {
          console.log('更新交易流水成功')
          globalUiKit.notify('提示', '视频交易流水记录成功！', 'success')
        } else {
          console.log('更新交易流水失败')
          window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + data.message + '；入参：' + JSON.stringify(params))
        }
      }).catch(error => {
        console.log(error)
        window.globalUiKit.alert('视频交易流水记录失败', '失败原因：' + error + '；入参：' + JSON.stringify(params))
      })
    },
    // 全局变量重置
    resetGlobalVarible: function() {
      this.frontName = ''
      this.reverseName = ''
      this.cusSceneName = ''
      this.licenseName = ''
      this.bizCertName = ''
      this.frontBase64 = 'assets/theme/img/viceoBiz/frontPhoto.png'
      this.reverseBase64 = 'assets/theme/img/viceoBiz/reversePhoto.png'
      this.cusSceneBase64 = 'assets/theme/img/viceoBiz/perpr.png'
      this.bizCertData = {}
      this.failReason = ''
      this.bizCertUrl = ''
      this.dialogVisible = false
      this.customerInfo = {}
      this.assignHtml = '签名'
      this.customAssignFlag = true
      this.bizCertSeqNo = ''
      this.vqid = ''
      this.dialogFormVisibleFail = false
      this.cardActiveFlag = false
      this.sessionId = ''
      this.reasonDescribe = ''
      sessionStorage.removeItem('businessType')
    }
  }
}
</script>
<style scoped>
  .step-box {
    width: 100%;
    margin: 0 auto;
  }

  .font-weight{
    font-weight: bold;
  }

  /************************************* 页面一 *********************************************/
  .mt5 {
    margin-top: 5px;
  }

  .mt15 {
    margin: 15px 0px;
  }

  .custom-id-title {
    text-align: center;
    margin: 15px 0;
  }

  .papers-photo {
    height: 186px;
    width: 274px;
  }

  .papers-photo img {
    height: 100%;
    width: 100%;
  }

  .card-media-photo img {
    height: 100%;
    width: 100%;
  }

  .center {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .peror-photo {
    height: 200px;
    width: 186px;
    overflow: hidden;
  }

  .peror-photo img {
    height: 100%;
    width: 100%;
  }

  .per-result {
    margin: 10px 0;
  }

  /************************************* 页面三 *********************************************/
  .mb10 {
    margin-bottom: 10px;
  }

  .title-style {
    font-weight: bold;
  }

  .custInfo-box {
    padding: 0px 6%;
  }

  /************************************* 页面四 *********************************************/
  .page-box {
    height: 100%;
    width: 100%;
  }

  .left-box, .right-box {
    height: 750px;
  }

  .paddinglr0 {
    padding-right: 0px !important;
    padding-left: 0px !important;
  }

  .mt10 {
    margin-top: 10px;
  }

  .view-header {
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: #f5f7fa;
  }

  .view-middle {
    /*height: 650px;*/
  }

  .view-bottom {
    text-align: center;
    height: 55px;
    line-height: 55px;
  }

  .signNameBox {
    width: 100%;
    height: 225px;
    line-height: 225px;
    border: 1px dashed #ddd;
  }

  /***********************************交易结束********************************************/
  .photo-title {
    padding-top: 20px;
    text-align: center;
  }

  .exceed-photo {
    width: 62px;
    height: 62px;
    margin: 0 auto;
  }

  .photo-box {
    padding-top: 80px;
  }

  .padding-line-height {
    line-height: 26px;
  }
</style>
